<template>
  <div>
    <el-card>
      <el-table
        :data="menuPermissionList"
        :expand-row-keys="expandKeys"
        style="width: 100%"
        row-key="id"
        border
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="code"
          label="权限值"
          width="180"
        />
        <el-table-column
          prop="address"
          label="跳转权限值"
        />
        <el-table-column
          prop="address"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { reqpermission } from '@/api/menu'

export default {
  name: 'Menu',
  data() {
    return {
      menuPermissionList: [],
      // 需要自动展开的项
      expandKeys: []
    }
  },
  mounted() {
    this.getpermission()
  },
  methods: {
    async getpermission() {
      const res = await reqpermission()
      console.log(res)
      if (res.code === 20000) {
        this.menuPermissionList = res.data.children
        this.expandKeys = [this.menuPermissionList[0].id]
      }
    }
  }
}
</script>

<style scoped>

</style>
